<!-- 1 定义组件模版 --> 
<template>
  <div class="fatherComponent">
      <h3>我是父元素,演示 自定义事件 emit</h3>

      <div v-if="myWords">
             <ul>
              <li v-for="(word,index) in   myWords">{{index}} {{ word  }}</li>
             </ul> 
      </div>

      <Child @get-lucky-words="getluckyWords($event)"     ></Child>
  </div>
</template> 

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="Father">
import { ref ,reactive} from 'vue'
import Child from './Child.vue'

let  myWords = reactive<string[]>([])

//定义方法
function getluckyWords(words:string) {
  // console.log("event  ",event)
  // console.log("使用自定义事件，拜年话：", words)
  myWords.unshift(words)
}


</script> 

<!-- 3 定义样式 -->
<style scoped></style>